import Vue from "vue";

export const GlobalTooltipStore = Vue.observable({
  currentToolTipElement: null,
  show: false,
  Content: "",
});

let leaveTimer = null;
const leaveDelay = 200;
function onMouseEnter(evt) {
  if (leaveTimer) {
    clearTimeout(leaveTimer);
  }
  GlobalTooltipStore.currentToolTipElement = evt.target;
  GlobalTooltipStore.show = true;
  GlobalTooltipStore.Content = evt.target.title;
}
function onMouseLeave(evt) {
  leaveTimer = setTimeout(() => {
    GlobalTooltipStore.show = false;
    GlobalTooltipStore.currentToolTipElement = null;
  }, leaveDelay);
}

export const install = (vue: import("vue").VueConstructor) => {
  vue.directive("tooltip", {
    bind(el, binding) {
      el.title = binding.value;
      el.addEventListener("mouseenter", onMouseEnter, false);
      el.addEventListener("mouseleave", onMouseLeave, false);
    },
    unbind(el, binding) {
      el.removeEventListener("mouseenter", onMouseEnter);
      el.removeEventListener("mouseleave", onMouseLeave);
    },
  });
};
